import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ArtistLeftWrap } from "./style";
import { getSizeImageXY } from "@/utils/format-utils";
import { artistUl } from "@/services/local-data";
import { NavLink } from "react-router-dom";
import classNames from "classnames";
import { getArtistsAction } from "../store/actionTypes";
import ArtistSong from "@/components/artistSong";
import ArtistAlbumsInfo from "./a-pages/artistAlbumsInfo";
import ArtistMvInfo from "./a-pages/artistMvInfo";
import ArtistDescInfo from "./a-pages/artistDescInfo";

export default memo(function ArtistLeft(props) {
  const artist = props.info.length !== 0 ? props.info.artist : "";

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getArtistsAction(props.id));
  }, [dispatch, props.id]);

  const { artists } = useSelector(
    (state) => ({
      artists: state.getIn(["artistPage", "artists"]),
    }),
    shallowEqual
  );

  const artistsInfo = artists.code !== undefined && artists;

  document.title = `${artist.name} - 歌手 - 网易云音乐`;

  return (
    <ArtistLeftWrap>
      <div className="artist-name-box">
        <p>{artist.name}</p>
        {artistsInfo
          ? artistsInfo.artist.alias.map((item, index) => {
              const isShow = artistsInfo.artist.alias.length == index + 1;
              return (
                <span key={item}>
                  {item}
                  <span className={classNames({ isShow: isShow })}>;</span>
                </span>
              );
            })
          : ""}
      </div>
      <div className="artist-img-box">
        <img src={getSizeImageXY(artist.cover, 640, 300)} alt="" />
      </div>
      <ul className="artist-ul">
        {artistUl.map((item, index) => {
          const isSelect =
            props.location.pathname.split("/")[2] == undefined
              ? "undefined" == item.dataset
              : props.location.pathname.split("/")[2] == item.dataset;
          return (
            <li className="fl" key={item.title}>
              <NavLink
                to={{
                  pathname:
                    item.dataset == "undefined"
                      ? "/artist"
                      : "/artist/" + item.dataset,
                  search: "?id=" + props.id,
                }}
                className={classNames({ fsd: isSelect })}
              >
                {item.title}
              </NavLink>
            </li>
          );
        })}
      </ul>
      {props.location.pathname.split("/")[2] == undefined ? (
        <div className="hot-productions">
          <div className="clear">
            <a title="播放" className="playlist-playbtn button2">
              <i className="button2">
                <em className="ply button2"></em>
                播放
              </i>
            </a>
            <a className="playlist-play-addlist button2" title="添加到播放列表">
              {" "}
            </a>
            <a className="addalbum u-btn button2">
              <i className="addicon u-btn-i button2">收藏</i>
            </a>
          </div>
          <ArtistSong hotSong={artistsInfo} />
        </div>
      ) : props.location.pathname.split("/")[2] == "album" ? (
        <ArtistAlbumsInfo id={props.id} />
      ) : props.location.pathname.split("/")[2] == "mv" ? (
        <ArtistMvInfo id={props.id} />
      ) : props.location.pathname.split("/")[2] == "desc" ? (
        <ArtistDescInfo name={artist.name} id={props.id} />
      ) : (
        ""
      )}
    </ArtistLeftWrap>
  );
});
